<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位元素</title>
</head>
<style>
    
    *{
        padding: 0;
        margin: 0;
    }
    .one{
        position: relative; 
        top: 20px;
        background-color: blue;
        color: burlywood;
    }
    .three{
        position: absolute; 
        top: 20px;
        background-color: red;
    }
    .four{
        position: relative;/* 先给父元素相对定位，再给子元素绝对定位，子元素相对于父元素发生改变 */
        background-color: yellow;
        height: 200px;
    }
    .child{
        position: absolute;
        top: 10px;
    }
</style>
<body>
    <div class="one">相对定位</div>
    <div class="two">1111</div>
    <div class="three">绝对定位</div>
    <div class="four">
        <div class="child">子元素</div>
    </div>
</body>
</html>